<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue CLI创建项目 | 星辰阁</title>
  <meta name="keywords" content=" 教程 , vue ">
  <meta name="description" content="Vue CLI创建项目 | 星辰阁">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="个人简介李瑞桐 毕业于东北石油大学，目前从事殡葬相关应用开发工作。 喜欢研究新兴技术。 联系方式QQ :86415270邮箱 :86415270@qq.com">
<meta property="og:type" content="website">
<meta property="og:title" content="about">
<meta property="og:url" content="https://loveyangxiaoyu.gitee.io/lrt_blog/about/index.html">
<meta property="og:site_name" content="星辰阁">
<meta property="og:description" content="个人简介李瑞桐 毕业于东北石油大学，目前从事殡葬相关应用开发工作。 喜欢研究新兴技术。 联系方式QQ :86415270邮箱 :86415270@qq.com">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2019-11-11T07:11:13.000Z">
<meta property="article:modified_time" content="2022-11-20T05:27:08.036Z">
<meta property="article:author" content="李瑞桐">
<meta name="twitter:card" content="summary">


<link rel="icon" href="/lrt_blog/img/favicon.png" type="images/x-icon">

<link href="/lrt_blog/css/style.css?v=1.0.0" rel="stylesheet">

<link href="/lrt_blog/css/hl_theme/atom-light.css?v=1.0.0" rel="stylesheet">

<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="/lrt_blog/js/jquery.autocomplete.min.js?v=1.0.0" ></script>

<script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

<script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>



<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js" ></script>

<script src="/lrt_blog/js/iconfont.js?v=1.0.0" ></script>

<meta name="generator" content="Hexo 4.2.1"><link rel="alternate" href="/lrt_blog/atom.xml" title="星辰阁" type="application/atom+xml">
</head>
<div style="display: none">
  <input class="theme_disqus_on" value="false">
  <input class="theme_preload_comment" value="false">
  <input class="theme_blog_path" value="/lrt_blog">
</div>

<body>
<aside class="nav">
    <div class="nav-left">
        <a href="/lrt_blog/" class="avatar_target">
    <img class="avatar" src="/lrt_blog/img/avatar.jpg" />
</a>
<div class="author">
    <span>李瑞桐</span>
</div>

<div class="icon">
    
        
        <a title="rss" href="/lrt_blog/atom.xml" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-rss"></use>
                </svg>
            
        </a>
        
    
        
        <a title="github" href="https://github.com/lrt890424" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-github"></use>
                </svg>
            
        </a>
        
    
        
        <a title="gitee" href="https://gitee.com/loveyangxiaoyu" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-gitee"></use>
                </svg>
            
        </a>
        
    
        
    
        
    
        
        <a title="csdn" href="https://blog.csdn.net/lrt890424" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-csdn"></use>
                </svg>
            
        </a>
        
    
        
        <a title="oschina" href="https://my.oschina.net/loveyangxiaoyu" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-oschina"></use>
                </svg>
            
        </a>
        
    
        
    
</div>




<ul>
    <li><div class="all active">全部文章<small>(33)</small></div></li>
    
        
            
            <li><div data-rel="Linux"><i class="fold iconfont icon-right"></i>Linux<small>(9)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="CentOS">CentOS<small>(3)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Ubuntu">Ubuntu<small>(2)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
        
    
        
            
        
    
        
            
            <li><div data-rel="开发工具"><i class="fold iconfont icon-right"></i>开发工具<small>(6)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="SVN">SVN<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Git">Git<small>(2)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="jd-gui">jd-gui<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Markdown">Markdown<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Maven">Maven<small>(1)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
            <li><div data-rel="存储"><i class="fold iconfont icon-right"></i>存储<small>(7)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="MongoDB">MongoDB<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="MySQL">MySQL<small>(3)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Redis">Redis<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Navicat">Navicat<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="DM">DM<small>(1)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
            <li><div data-rel="Windows">Windows<small>(3)</small></div>
                
            </li>
            
        
    
        
            
        
    
        
            
            <li><div data-rel="笔记">笔记<small>(1)</small></div>
                
            </li>
            
        
    
        
            
        
    
        
            
            <li><div data-rel="Web服务器"><i class="fold iconfont icon-right"></i>Web服务器<small>(1)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="Nginx">Nginx<small>(1)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
            <li><div data-rel="容器"><i class="fold iconfont icon-right"></i>容器<small>(1)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="Docker">Docker<small>(1)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
            <li><div data-rel="前端开发"><i class="fold iconfont icon-right"></i>前端开发<small>(3)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="Vue CLI">Vue CLI<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Yarn">Yarn<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="Eslint">Eslint<small>(1)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
            <li><div data-rel="工具"><i class="fold iconfont icon-right"></i>工具<small>(1)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="hexo">hexo<small>(1)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
        
            
            <li><div data-rel="开源">开源<small>(1)</small></div>
                
            </li>
            
        
    
        
            
        
    
</ul>
<div class="left-bottom">
    <div class="menus">
    
    
    
    
    </div>
    <div><a class="about  site_url"  href="/lrt_blog/about">关于</a></div>
</div>
<input type="hidden" id="yelog_site_posts_number" value="33">
<input type="hidden" id="yelog_site_word_count" value="52k">
<div style="display: none">
    <span id="busuanzi_value_site_uv"></span>
    <span id="busuanzi_value_site_pv"></span>
</div>

    </div>
    <div class="nav-right">
        <div class="friends-area">
    <div class="friends-title">
        友情链接
        <i class="back-title-list"></i>
    </div>
    <div class="friends-content">
        <ul>
            
            <li><a target="_blank" href="http://yelog.org/">叶落阁</a></li>
            
        </ul>
    </div>
</div>
        <div class="title-list">
    <form onkeydown="if(event.keyCode==13){return false;}">
        <input class="search" type="text" placeholder="以 in: 开头进行全文搜索" autocomplete="off"id="local-search-input" >
        <i class="cross"></i>
        <span>
            <label for="tagswitch">Tags:</label>
            <input id="tagswitch" type="checkbox" style="display: none" />
            <i id="tagsWitchIcon"></i>
        </span>
    </form>
    <div class="tags-list">
    
    <li class="article-tag-list-item">
        <a class="color3">教程</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">centos</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">linux</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">问题集锦</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">防火墙</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">软件安装</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">ubuntu</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">svn</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">git</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">MongoDB</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">jd-gui</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">java</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">反编译</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">MySQL</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">Redis</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">学习笔记</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">navicat</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">DM</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">windows</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">系统优化</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">书签</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">Nginx</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">docker</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">vue</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">Yarn</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">前端开发</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">vscode</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">eslint</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">prettier</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">Markdown</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">hexo</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">开源</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">Maven</a>
    </li>
    
    <div class="clearfix"></div>
</div>

    
    <div id="local-search-result">

    </div>
    
    <nav id="title-list-nav">
        
        <a  class="Windows "
           href="/lrt_blog/2022/11/20/01Windows/Windows11%E4%BC%98%E5%8C%96%E9%85%8D%E7%BD%AE/"
           data-tag="windows,系统优化"
           data-author="" >
            <span class="post-title" title="Windows11优化配置">Windows11优化配置</span>
            <span class="post-date" title="2022-11-20 00:00:00">2022/11/20</span>
        </a>
        
        <a  class="存储 DM "
           href="/lrt_blog/2021/11/16/04%E5%AD%98%E5%82%A8/%E9%93%B6%E6%B2%B3%E9%BA%92%E9%BA%9F%E5%AE%89%E8%A3%85%E8%BE%BE%E6%A2%A6%E6%95%B0%E6%8D%AE%E5%BA%93/"
           data-tag="软件安装,DM"
           data-author="" >
            <span class="post-title" title="银河麒麟安装达梦数据库">银河麒麟安装达梦数据库</span>
            <span class="post-date" title="2021-11-16 00:00:00">2021/11/16</span>
        </a>
        
        <a  class="前端开发 Vue CLI "
           href="/lrt_blog/2021/02/02/66%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/vue-cli%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE/"
           data-tag="教程,vue"
           data-author="" >
            <span class="post-title" title="Vue CLI创建项目">Vue CLI创建项目</span>
            <span class="post-date" title="2021-02-02 21:08:20">2021/02/02</span>
        </a>
        
        <a  class="前端开发 Eslint "
           href="/lrt_blog/2021/02/01/66%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/vscode%E4%B8%8A%E9%85%8D%E7%BD%AEEslint-Prettier/"
           data-tag="前端开发,vscode,eslint,prettier"
           data-author="" >
            <span class="post-title" title="vscode上配置Eslint+Prettier">vscode上配置Eslint+Prettier</span>
            <span class="post-date" title="2021-02-01 00:00:00">2021/02/01</span>
        </a>
        
        <a  class="前端开发 Yarn "
           href="/lrt_blog/2021/01/31/66%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/%E5%8C%85%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7yarn%E5%AE%89%E8%A3%85%E5%92%8C%E9%85%8D%E7%BD%AE/"
           data-tag="教程,Yarn"
           data-author="" >
            <span class="post-title" title="包管理工具yarn安装和配置">包管理工具yarn安装和配置</span>
            <span class="post-date" title="2021-01-31 17:37:05">2021/01/31</span>
        </a>
        
        <a  class="Web服务器 Nginx "
           href="/lrt_blog/2020/04/30/05web%E6%9C%8D%E5%8A%A1%E5%99%A8/Linux%E4%B8%8B%E5%AE%89%E8%A3%85Nginx%E6%9C%8D%E5%8A%A1/"
           data-tag="软件安装,Nginx"
           data-author="" >
            <span class="post-title" title="Linux下安装Nginx服务">Linux下安装Nginx服务</span>
            <span class="post-date" title="2020-04-30 10:10:58">2020/04/30</span>
        </a>
        
        <a  class="存储 MongoDB "
           href="/lrt_blog/2020/04/30/04%E5%AD%98%E5%82%A8/Linux%E4%B8%8B%E5%AE%89%E8%A3%85MongoDB%E6%9C%8D%E5%8A%A1/"
           data-tag="软件安装,MongoDB"
           data-author="" >
            <span class="post-title" title="Linux下安装MongoDB服务">Linux下安装MongoDB服务</span>
            <span class="post-date" title="2020-04-30 00:00:00">2020/04/30</span>
        </a>
        
        <a  class="存储 Redis "
           href="/lrt_blog/2020/04/30/04%E5%AD%98%E5%82%A8/Linux%E4%B8%8B%E5%AE%89%E8%A3%85Redis%E6%9C%8D%E5%8A%A1/"
           data-tag="软件安装,Redis"
           data-author="" >
            <span class="post-title" title="Linux下安装Redis服务">Linux下安装Redis服务</span>
            <span class="post-date" title="2020-04-30 00:00:00">2020/04/30</span>
        </a>
        
        <a  class="容器 Docker "
           href="/lrt_blog/2020/01/04/03%E5%AE%B9%E5%99%A8/docker%E7%A6%BB%E7%BA%BF%E5%AE%89%E8%A3%85/"
           data-tag="软件安装,docker"
           data-author="" >
            <span class="post-title" title="docker离线安装">docker离线安装</span>
            <span class="post-date" title="2020-01-04 00:00:00">2020/01/04</span>
        </a>
        
        <a  class="笔记 "
           href="/lrt_blog/2019/12/26/07Java/%E5%AD%A6%E4%B9%A0-%E4%B9%A6%E7%AD%BE/"
           data-tag="书签"
           data-author="" >
            <span class="post-title" title="学习-书签">学习-书签</span>
            <span class="post-date" title="2019-12-26 00:00:00">2019/12/26</span>
        </a>
        
        <a  class="开源 "
           href="/lrt_blog/2019/12/19/77%E5%85%B6%E4%BB%96%E5%B7%A5%E5%85%B7/%E5%9B%BD%E5%86%85%E5%BC%80%E6%BA%90%E9%95%9C%E5%83%8F%E7%AB%99%E7%82%B9/"
           data-tag="开源"
           data-author="" >
            <span class="post-title" title="国内开源镜像站点">国内开源镜像站点</span>
            <span class="post-date" title="2019-12-19 00:00:00">2019/12/19</span>
        </a>
        
        <a  class="存储 MySQL "
           href="/lrt_blog/2019/12/16/04%E5%AD%98%E5%82%A8/MySQL%20%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"
           data-tag="MySQL,学习笔记"
           data-author="" >
            <span class="post-title" title="MySQL 学习笔记">MySQL 学习笔记</span>
            <span class="post-date" title="2019-12-16 00:00:00">2019/12/16</span>
        </a>
        
        <a  class="存储 MySQL "
           href="/lrt_blog/2019/12/15/04%E5%AD%98%E5%82%A8/Linux%E7%8E%AF%E5%A2%83%E4%B8%8B%E5%AE%89%E8%A3%85MySQL%E6%9C%8D%E5%8A%A1/"
           data-tag="软件安装,MySQL"
           data-author="" >
            <span class="post-title" title="Linux环境下安装MySQL服务">Linux环境下安装MySQL服务</span>
            <span class="post-date" title="2019-12-15 00:00:00">2019/12/15</span>
        </a>
        
        <a  class="存储 Navicat "
           href="/lrt_blog/2019/12/15/04%E5%AD%98%E5%82%A8/Navicat%20Premium%2012%20%E7%A0%B4%E8%A7%A3/"
           data-tag="软件安装,navicat"
           data-author="" >
            <span class="post-title" title="Navicat Premium 12 破解">Navicat Premium 12 破解</span>
            <span class="post-date" title="2019-12-15 00:00:00">2019/12/15</span>
        </a>
        
        <a  class="存储 MySQL "
           href="/lrt_blog/2019/12/15/04%E5%AD%98%E5%82%A8/Windows%E7%8E%AF%E5%A2%83%E4%B8%8B%E5%AE%89%E8%A3%85MySQL%E6%9C%8D%E5%8A%A1/"
           data-tag="软件安装,MySQL"
           data-author="" >
            <span class="post-title" title="Windows环境下安装MySQL服务">Windows环境下安装MySQL服务</span>
            <span class="post-date" title="2019-12-15 00:00:00">2019/12/15</span>
        </a>
        
        <a  class="开发工具 SVN "
           href="/lrt_blog/2019/12/01/02%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/Windows%E7%8E%AF%E5%A2%83%E4%B8%8B%E6%90%AD%E5%BB%BASVN%E6%9C%8D%E5%8A%A1%E5%99%A8/"
           data-tag="软件安装,svn"
           data-author="" >
            <span class="post-title" title="Windows环境下搭建SVN服务器">Windows环境下搭建SVN服务器</span>
            <span class="post-date" title="2019-12-01 00:00:00">2019/12/01</span>
        </a>
        
        <a  class="开发工具 Git "
           href="/lrt_blog/2019/11/30/02%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/git%E9%97%AE%E9%A2%98%E9%9B%86%E9%94%A6/"
           data-tag="问题集锦,git"
           data-author="" >
            <span class="post-title" title="git问题集锦">git问题集锦</span>
            <span class="post-date" title="2019-11-30 00:00:00">2019/11/30</span>
        </a>
        
        <a  class="开发工具 Git "
           href="/lrt_blog/2019/11/30/02%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/Git%20%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"
           data-tag="git"
           data-author="" >
            <span class="post-title" title="Git 学习笔记">Git 学习笔记</span>
            <span class="post-date" title="2019-11-30 00:00:00">2019/11/30</span>
        </a>
        
        <a  class="开发工具 jd-gui "
           href="/lrt_blog/2019/11/30/02%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/jd-gui%E5%8F%8D%E7%BC%96%E8%AF%91jar%E5%90%8E%E6%B8%85%E9%99%A4%E5%90%8E%E9%9D%A2%E7%9A%84%E6%B3%A8%E9%87%8A%E4%BF%A1%E6%81%AF%E5%8F%8A%E8%A1%8C%E5%8F%B7/"
           data-tag="jd-gui,java,反编译"
           data-author="" >
            <span class="post-title" title="jd-gui反编译jar后清除后面的注释信息及行号">jd-gui反编译jar后清除后面的注释信息及行号</span>
            <span class="post-date" title="2019-11-30 00:00:00">2019/11/30</span>
        </a>
        
        <a  class="开发工具 Maven "
           href="/lrt_blog/2019/11/30/02%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/Maven%20%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"
           data-tag="教程,Maven"
           data-author="" >
            <span class="post-title" title="Maven 学习笔记">Maven 学习笔记</span>
            <span class="post-date" title="2019-11-30 00:00:00">2019/11/30</span>
        </a>
        
        <a  class="Windows "
           href="/lrt_blog/2019/11/24/01Windows/Windows10%E4%BC%98%E5%8C%96%E9%85%8D%E7%BD%AE/"
           data-tag="windows,系统优化"
           data-author="" >
            <span class="post-title" title="Windows10优化配置">Windows10优化配置</span>
            <span class="post-date" title="2019-11-24 00:00:00">2019/11/24</span>
        </a>
        
        <a  class="Windows "
           href="/lrt_blog/2019/11/24/01Windows/Windows10%E5%8F%96%E6%B6%88%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0/"
           data-tag="windows,系统优化"
           data-author="" >
            <span class="post-title" title="Windows10取消自动更新">Windows10取消自动更新</span>
            <span class="post-date" title="2019-11-24 00:00:00">2019/11/24</span>
        </a>
        
        <a  class="Linux CentOS "
           href="/lrt_blog/2019/11/23/01Linux/CentOS%20yum%E5%91%BD%E4%BB%A4/"
           data-tag="教程,centos"
           data-author="" >
            <span class="post-title" title="yum命令">yum命令</span>
            <span class="post-date" title="2019-11-23 00:00:00">2019/11/23</span>
        </a>
        
        <a  class="Linux Ubuntu "
           href="/lrt_blog/2019/11/23/01Linux/sudo%E7%9B%B8%E5%85%B3%E6%93%8D%E4%BD%9C/"
           data-tag="教程,linux"
           data-author="" >
            <span class="post-title" title="sudo相关操作">sudo相关操作</span>
            <span class="post-date" title="2019-11-23 00:00:00">2019/11/23</span>
        </a>
        
        <a  class="Linux CentOS "
           href="/lrt_blog/2019/11/23/01Linux/CentOS%20%E6%97%B6%E5%8C%BA%E9%97%AE%E9%A2%98/"
           data-tag="centos,问题集锦"
           data-author="" >
            <span class="post-title" title="CentOS时区问题">CentOS时区问题</span>
            <span class="post-date" title="2019-11-23 00:00:00">2019/11/23</span>
        </a>
        
        <a  class="Linux "
           href="/lrt_blog/2019/11/23/01Linux/Linux%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/"
           data-tag="教程,linux"
           data-author="" >
            <span class="post-title" title="Linux常用命令">Linux常用命令</span>
            <span class="post-date" title="2019-11-23 00:00:00">2019/11/23</span>
        </a>
        
        <a  class="Linux CentOS "
           href="/lrt_blog/2019/11/23/01Linux/CentOS%20%E8%AE%BE%E7%BD%AE%E9%98%B2%E7%81%AB%E5%A2%99%E6%93%8D%E4%BD%9C%E3%80%81%E5%BC%80%E6%94%BE%E6%8C%87%E5%AE%9A%E7%AB%AF%E5%8F%A3%E6%93%8D%E4%BD%9C/"
           data-tag="centos,防火墙"
           data-author="" >
            <span class="post-title" title="CentOS设置防火墙操作、开放指定端口操作">CentOS设置防火墙操作、开放指定端口操作</span>
            <span class="post-date" title="2019-11-23 00:00:00">2019/11/23</span>
        </a>
        
        <a  class="Linux Ubuntu "
           href="/lrt_blog/2019/11/23/01Linux/ubuntu%20root%E7%94%A8%E6%88%B7%E5%91%BD%E4%BB%A4%E8%A1%A5%E5%85%A8/"
           data-tag="ubuntu"
           data-author="" >
            <span class="post-title" title="ubuntu root用户命令补全">ubuntu root用户命令补全</span>
            <span class="post-date" title="2019-11-23 00:00:00">2019/11/23</span>
        </a>
        
        <a  class="Linux "
           href="/lrt_blog/2019/11/17/01Linux/%E9%85%8D%E7%BD%AEip+yum%E6%88%96apt%E6%BA%90/"
           data-tag="教程,linux"
           data-author="" >
            <span class="post-title" title="配置ip+yum或apt源">配置ip+yum或apt源</span>
            <span class="post-date" title="2019-11-17 00:00:00">2019/11/17</span>
        </a>
        
        <a  class="Linux "
           href="/lrt_blog/2019/11/16/01Linux/%E8%99%9A%E6%8B%9F%E6%9C%BA%E4%B8%AD%E5%AE%89%E8%A3%85centos7.6%E6%95%99%E7%A8%8B/"
           data-tag="centos,软件安装"
           data-author="" >
            <span class="post-title" title="虚拟机中安装centos7.6教程">虚拟机中安装centos7.6教程</span>
            <span class="post-date" title="2019-11-16 00:00:00">2019/11/16</span>
        </a>
        
        <a  class="Linux "
           href="/lrt_blog/2019/11/16/01Linux/%E8%99%9A%E6%8B%9F%E6%9C%BA%E4%B8%AD%E5%AE%89%E8%A3%85ubuntu16.04.06%E6%95%99%E7%A8%8B/"
           data-tag="软件安装,ubuntu"
           data-author="" >
            <span class="post-title" title="虚拟机中安装ubuntu16.04.06教程">虚拟机中安装ubuntu16.04.06教程</span>
            <span class="post-date" title="2019-11-16 00:00:00">2019/11/16</span>
        </a>
        
        <a  class="工具 hexo "
           href="/lrt_blog/2019/11/14/77%E5%85%B6%E4%BB%96%E5%B7%A5%E5%85%B7/%E4%BD%BF%E7%94%A8Gitee+Hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/"
           data-tag="教程,hexo"
           data-author="" >
            <span class="post-title" title="使用Gitee+Hexo搭建个人博客">使用Gitee+Hexo搭建个人博客</span>
            <span class="post-date" title="2019-11-14 00:00:00">2019/11/14</span>
        </a>
        
        <a  class="开发工具 Markdown "
           href="/lrt_blog/2019/11/11/77%E5%85%B6%E4%BB%96%E5%B7%A5%E5%85%B7/Markdown%20%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"
           data-tag="教程,Markdown"
           data-author="" >
            <span class="post-title" title="Markdown 学习笔记">Markdown 学习笔记</span>
            <span class="post-date" title="2019-11-11 00:00:00">2019/11/11</span>
        </a>
        
    </nav>
</div>
    </div>
    <div class="hide-list">
        <div class="semicircle">
            <div class="brackets first"><</div>
            <div class="brackets">&gt;</div>
        </div>
    </div>
</aside>
<div class="post">
    <div class="pjax">
        <article id="post-66前端开发/vue-cli创建项目" class="article article-type-post" itemscope itemprop="blogPost">
    
        <h1 class="article-title">Vue CLI创建项目</h1>
    
    <div class="article-meta">
        
        
        
        <span class="book">
            
                <a data-rel="前端开发">前端开发</a>/
            
                <a data-rel="Vue CLI">Vue CLI</a>
            
        </span>
        
        
        <span class="tag">
            
            <a class="color3">教程</a>
            
            <a class="color4">vue</a>
            
        </span>
        
    </div>
    <div class="article-meta">
        
        创建时间:<time class="date" title='更新时间: 2022-11-20 17:11:12'>2021-02-02 21:08</time>
        
    </div>
    <div class="article-meta">
        
        <span>字数:1.7k</span>
        
        
        <span id="busuanzi_container_page_pv">
            阅读:<span id="busuanzi_value_page_pv">
                <span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </span>
        </span>
        
        
        <span class="top-comment" title="跳转至评论区">
            <a href="#comments">
                评论:<span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </a>
        </span>
        
    </div>
    
    <div class="toc-ref">
    
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue-CLI创建项目"><span class="toc-text">Vue CLI创建项目</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#安装"><span class="toc-text">安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#创建项目"><span class="toc-text">创建项目</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#vue-create"><span class="toc-text">vue create</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用图形化界面"><span class="toc-text">使用图形化界面</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#常用相关插件"><span class="toc-text">常用相关插件</span></a></li></ol></li></ol>
    
<style>
    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
    .toc-level-3 i,
    .toc-level-3 ol {
        display: none !important;
    }
</style>
</div>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><div class='inner-toc'><h2>目录</h2><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue-CLI创建项目"><span class="toc-text">Vue CLI创建项目</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#安装"><span class="toc-text">安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#创建项目"><span class="toc-text">创建项目</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#vue-create"><span class="toc-text">vue create</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用图形化界面"><span class="toc-text">使用图形化界面</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#常用相关插件"><span class="toc-text">常用相关插件</span></a></li></ol></li></ol></div></p>
<h1 id="Vue-CLI创建项目"><a href="#Vue-CLI创建项目" class="headerlink" title="Vue CLI创建项目"></a>Vue CLI创建项目</h1><p><a href="https://cli.vuejs.org/zh/" target="_blank" rel="noopener">Vue CLI</a> Vue.js 开发的标准工具</p>
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>全局安装@vue/cli</p>
<pre><code class="shell">#npm
npm i -g @vue/cli
#yarn
yarn global add @vue/cli</code></pre>
<h2 id="创建项目"><a href="#创建项目" class="headerlink" title="创建项目"></a>创建项目</h2><h3 id="vue-create"><a href="#vue-create" class="headerlink" title="vue create"></a>vue create</h3><p>运行以下命令来创建一个新项目：</p>
<pre><code class="bash">$ vue create hello-world</code></pre>
<blockquote>
<p>警告</p>
<p>如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 <code>winpty vue.cmd create hello-world</code> 启动这个命令。不过，如果你仍想使用 <code>vue create hello-world</code>，则可以通过在 <code>~/.bashrc</code> 文件中添加以下行来为命令添加别名。 <code>alias vue=&#39;winpty vue.cmd&#39;</code> 你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。</p>
</blockquote>
<p>你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。</p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210204075513933.png" alt="image-20210204075513933"></p>
<p>用空格选择要使用的功能</p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210204075748868.png" alt="image-20210204075748868"></p>
<p>选择vue2.0</p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210204075857779.png" alt="image-20210204075857779"></p>
<p>路由模式选为history</p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210204075926663.png" alt="image-20210204075926663"></p>
<p>选择Sass/SCSS (with-dart-sass)</p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210204075957630.png" alt="image-20210204075957630"></p>
<p>选择ESLint+Prettier</p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210204080045695.png" alt="image-20210204080045695"></p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210204090147996.png" alt="image-20210204090147996"></p>
<p>选择jest做为单元测试框架</p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210204090245586.png" alt="image-20210204090245586"></p>
<p>单独的配置文件</p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210204090311140.png" alt="image-20210204090311140"></p>
<p>保存预设</p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210204090400943.png" alt="image-20210204090400943"></p>
<p>选择包管理器yarn</p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210204090432752.png" alt="image-20210204090432752"></p>
<h3 id="使用图形化界面"><a href="#使用图形化界面" class="headerlink" title="使用图形化界面"></a>使用图形化界面</h3><p>你也可以通过 <code>vue ui</code> 命令以图形化界面创建和管理项目：</p>
<pre><code class="bash">$ vue ui</code></pre>
<p>可视化界面创建项目<code>vue ui</code></p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210203093937115.png" alt="image-20210203093937115"></p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210203094113536.png" alt="image-20210203094113536"></p>
<p>选择项目地址、是否初始化git、要不要覆盖文件夹、需不需要新手指引        </p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210203094259848.png" alt="image-20210203094259848"></p>
<p>选择预设配置信息进行创建</p>
<ul>
<li>默认预设配置（只含有babel、eslint插件）</li>
<li>手动预设配置项目（自定义要使用的插件及配置）</li>
<li>远程预设配置（从git仓库拉取）</li>
<li>自定义预设配置（手动配置后保存的）</li>
</ul>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210203094533236.png" alt="image-20210203094533236"></p>
<p>手动配置、自定义配置</p>
<ul>
<li>选择vue版本</li>
<li>Babel</li>
<li>Router</li>
<li>Vuex</li>
<li>Css Pre-processors<ul>
<li><strong>Sass/SCSS(with dart-sass)</strong>    **推荐</li>
<li>Sass/SCSS(with node-sass)</li>
<li>Less</li>
<li>Stylus</li>
</ul>
</li>
<li>Linter/Formatter<ul>
<li>ESLint with error prevention only 只包含eslint</li>
<li>ESLint+Airbnb config</li>
<li>ESLint+Standard config</li>
<li>*<em>推荐  *</em>推荐</li>
</ul>
</li>
<li>Unit Testing<ul>
<li>Mocha+Chai</li>
<li>*<em>推荐  *</em>推荐</li>
</ul>
</li>
<li>使用配置文件</li>
</ul>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210203095652940.png" alt="image-20210203095652940"></p>
<p>插件配置</p>
<p>在保存时校验、提交前校验和修复</p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210203100109445.png" alt="image-20210203100109445"></p>
<p>保存新预设</p>
<p><img src="https://gitee.com/loveyangxiaoyu/pic/raw/master/img/lrt/image-20210203100829570.png" alt="image-20210203100829570"></p>
<h2 id="常用相关插件"><a href="#常用相关插件" class="headerlink" title="常用相关插件"></a>常用相关插件</h2><ul>
<li><strong>VUE全家桶</strong><ul>
<li><a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener">Vuex</a>：状态管理</li>
<li><a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener">Vue Router</a>：Vue.js 官方的路由管理器</li>
</ul>
</li>
</ul>
<pre><code class="bash">$ vue add vuex
$ vue add router</code></pre>
<ul>
<li><p><strong>Babel</strong></p>
<ul>
<li><a href="https://www.babeljs.cn/" target="_blank" rel="noopener">Babel</a>：JavaScript 编译器</li>
</ul>
<pre><code class="bash">$ vue add babel</code></pre>
</li>
<li><p><strong>Typescript</strong></p>
<ul>
<li><pre><code class="bash">$ vue add typescript</code></pre>
</li>
</ul>
</li>
<li><p><strong>PWA</strong></p>
<ul>
<li><pre><code class="bash">$ vue add @vue/pwa</code></pre>
</li>
</ul>
</li>
<li><p><strong>CSS</strong></p>
<ul>
<li><a href="https://stylus.bootcss.com/" target="_blank" rel="noopener">stylus</a>：富于表现力、动态的、健壮的 CSS</li>
</ul>
</li>
<li><p><a href="https://less.bootcss.com/" target="_blank" rel="noopener">Less</a>：CSS 预处理语言</p>
<ul>
<li><a href="https://sass.bootcss.com/" target="_blank" rel="noopener">Sass</a>：成熟、稳定、强大的css扩展语言</li>
</ul>
<pre><code class="bash">$ yarn add stylus stylus-loader -D
$ yarn add less less-loader -D
$ yarn add sass sass-loader -D</code></pre>
</li>
<li><p><strong>Linter/Formatter</strong></p>
<ul>
<li><a href="https://cn.eslint.org/" target="_blank" rel="noopener">ESLint</a>：JavaScript和JSX检查工具</li>
<li><a href="https://github.com/airbnb/javascript" target="_blank" rel="noopener">Airbnb Javascript style</a>：纯粹的提供<code>code style</code></li>
<li><a href="https://github.com/feross/standard" target="_blank" rel="noopener">Standard code style</a>：提供了Javascript的编写风格，并且提供了对应的command工具以及针对文本编辑器的工具</li>
<li><a href="https://prettier.io/" target="_blank" rel="noopener">Prettier</a>：代码格式工具</li>
</ul>
<pre><code class="bash">$ vue add eslint</code></pre>
</li>
<li><p><strong>Unit Testing</strong></p>
<ul>
<li><a href="https://mochajs.cn/" target="_blank" rel="noopener">Mocha</a>：javascript测试框架，<a href="http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html" target="_blank" rel="noopener">阮一峰教程</a>。</li>
<li><a href="https://www.chaijs.com/" target="_blank" rel="noopener">Chai</a>：用于<a href="http://nodejs.org/" target="_blank" rel="noopener">节点</a>和浏览器的BDD / TDD断言库。</li>
<li><a href="https://www.jestjs.cn/" target="_blank" rel="noopener">Jest</a>：JavaScript 测试框架</li>
</ul>
<pre><code class="bash">$ vue add unit-mocha
$ vue add unit-jest</code></pre>
</li>
<li><p><strong>E2E Testing</strong></p>
<ul>
<li><a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>：前端 E2E 测试工具</li>
<li><a href="https://nightwatchjs.org/" target="_blank" rel="noopener">NightWatch</a>：前端 E2E 测试工具</li>
<li><a href="https://webdriver.io/" target="_blank" rel="noopener">WebdriverIO</a>：前端 E2E 测试工具</li>
</ul>
<pre><code class="bash">$ vue add e2e-cypress
$ vue add e2e-nightwatch
#下载不下来
$ vue add e2e-webdriverio</code></pre>
</li>
<li><p><strong>vuex 持久化</strong></p>
<ul>
<li><p><a href="https://github.com/robinvdvleuten/vuex-persistedstate" target="_blank" rel="noopener">vuex-persistedstate</a>：实现vuex状态持久化</p>
</li>
<li><pre><code class="bash">$ yarn add vuex-persistedstate</code></pre>
</li>
</ul>
</li>
<li><p><strong>UI</strong></p>
<ul>
<li><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener">element-ui</a>: pc端 </li>
<li><a href="https://www.iviewui.com/" target="_blank" rel="noopener">iview</a>: pc端</li>
<li><a href="https://vue.ant.design/docs/vue/introduce-cn/" target="_blank" rel="noopener">antd</a>: pc端</li>
<li><a href="https://doc.vux.li/zh-CN/" target="_blank" rel="noopener">vux</a>: 移动端</li>
<li><a href="https://youzan.github.io/vant/#/zh-CN/intro" target="_blank" rel="noopener">vant-ui</a>: 移动端</li>
<li><a href="http://mint-ui.github.io/#!/zh-cn" target="_blank" rel="noopener">mint-ui</a>: 移动端</li>
</ul>
<pre><code class="bash">$ yarn add element-ui
$ yarn add view-design
$ yarn add ant-design-vue
$ yarn add vux
$ yarn add vant
$ yarn add mint-ui</code></pre>
</li>
<li><p><strong>请求</strong></p>
<ul>
<li><a href="https://www.kancloud.cn/yunye/axios/234845" target="_blank" rel="noopener">axios</a>: 基于 promise 的 HTTP 库</li>
</ul>
<pre><code class="bash">$ yarn add axios</code></pre>
</li>
<li><p><strong>图表</strong></p>
<ul>
<li><a href="https://echarts.apache.org/zh/index.html" target="_blank" rel="noopener">ECharts</a>：JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器</li>
<li><a href="https://github.com/ecomfe/echarts-gl" target="_blank" rel="noopener">ECharts-GL</a>：ECharts 扩展插件，3D 图表、地理可视化、WebGL 加速渲染</li>
<li><a href="https://github.com/ecomfe/echarts-wordcloud" target="_blank" rel="noopener">字符云</a>：ECharts 扩展插件，字符云可以将文字根据不同的权重布局为大小、颜色各异的图，支持使用图片作为遮罩</li>
<li><a href="https://github.com/ecomfe/vue-echarts" target="_blank" rel="noopener">vue-echarts</a>：echarts vue组件</li>
<li><a href="https://antv.gitee.io/zh" target="_blank" rel="noopener">AntV</a>：蚂蚁集团全新一代数据可视化解决方案，包含G2|G2Plot、F2|F2Native、G6|Graphin、X6、L7、AVA</li>
<li><a href="https://antv-g2.gitee.io/zh" target="_blank" rel="noopener">AntV G2</a>：G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。</li>
<li><a href="https://viserjs.github.io/" target="_blank" rel="noopener">Viser</a>：基于 G2的Vue分发版本。</li>
<li><a href="https://antv-g2.gitee.io/zh/docs/manual/dataset/overview" target="_blank" rel="noopener">DataSet</a> ：作为数据处理模块，为数据可视化中数据预处理环节提供了强大的功能</li>
</ul>
<pre><code class="bash"># vue封装版本
$ yarn add echarts vue-echarts echarts-gl echarts-wordcloud
$ yarn add viser-vue @antv/data-set

# 未封装根据文档使用
$ yarn add @antv/g2
$ yarn add @antv/g2plot
$ yarn add @antv/f2
$ yarn add @antv/g6
$ yarn add @antv/graphin
$ yarn add @antv/x6
$ yarn add @antv/knowledge // 图表知识库
$ yarn add @antv/dw-analyzer // 数据集分析
$ yarn add @antv/dw-random // 数据模拟
$ yarn add @antv/chart-advisor // 图表推荐和自动生成</code></pre>
</li>
<li><p><strong>地图</strong></p>
<ul>
<li><a href="https://elemefe.github.io/vue-amap/#/" target="_blank" rel="noopener">vue-amap</a>：是一套基于Vue 2.0和高德地图的地图组件</li>
<li><a href="https://leafletjs.com/" target="_blank" rel="noopener">Leaflet</a>：开源地图框架</li>
<li><a href="https://openlayers.org/" target="_blank" rel="noopener">Openlayers</a>：开源地图框架</li>
<li><a href="https://gitee.com/newgateway/xdh-map" target="_blank" rel="noopener">xdh-map</a>：基于Openlayers的地图应用Vue组件</li>
</ul>
<pre><code class="bash">$ yarn add vue-amap
$ yarn add vue2-leaflet leaflet
$ yarn add ol
$ yarn add xdh-map</code></pre>
</li>
<li><p><strong>富文本</strong></p>
<ul>
<li><a href="https://www.wangeditor.com/" target="_blank" rel="noopener"><strong>wangEditor</strong></a>：国内开源 Web 富文本编辑器</li>
<li><a href="https://quilljs.com/" target="_blank" rel="noopener">Quill</a>：富文本编辑器</li>
<li><a href="https://www.npmjs.com/package/vue-quill-editor" target="_blank" rel="noopener">vue-quill-editor</a>：基于quill的vue组件，<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank" rel="noopener">github</a></li>
</ul>
<pre><code class="bash">$ yarn add wangeditor
$ yarn add vue-quill-editor quill</code></pre>
</li>
<li><p><strong>工具库</strong></p>
<ul>
<li><a href="https://www.lodashjs.com/" target="_blank" rel="noopener">Lodash</a> ：一个一致性、模块化、高性能的 JavaScript 实用工具库</li>
<li><a href="https://github.com/smartprocure/futil-js" target="_blank" rel="noopener">futil-js</a> ：是一套用来补足 lodash 的实用工具集</li>
<li><a href="http://momentjs.cn/" target="_blank" rel="noopener">Moment</a>：JavaScript 日期处理类库</li>
<li><a href="http://momentjs.cn/timezone/" target="_blank" rel="noopener">Moment Timezone</a>：JavaScript 时区处理类库</li>
<li><a href="https://www.npmjs.com/package/js-cookie" target="_blank" rel="noopener">js-cookie</a>：操作cookie</li>
<li><a href="https://www.npmjs.com/package/js-md5" target="_blank" rel="noopener">js-md5</a> / md5: md5加密.</li>
<li><a href="https://www.npmjs.com/package/jsencrypt" target="_blank" rel="noopener">jsencrypt</a> / jsencrypt-rsa: rsa加密, 可用来加密md5加密后的文件</li>
<li><a href="https://github.com/ljharb/qs" target="_blank" rel="noopener">qs</a>：字符串解析和序列化</li>
<li><a href="https://github.com/pillarjs/path-to-regexp" target="_blank" rel="noopener">path-to-regexp</a>：将路径字符串（如/ user /：name）转换为正则表达式</li>
<li><a href="https://www.npmjs.com/package/jszip" target="_blank" rel="noopener">jszip</a>：前端打包压缩</li>
<li><a href="https://www.npmjs.com/package/store" target="_blank" rel="noopener">Store.js</a>：存储api</li>
<li><a href="https://www.npmjs.com/package/file-saver" target="_blank" rel="noopener">file-saver</a>：FileSaver.js 在没有原生支持 <code>saveAs()</code> 的浏览器上实现了 <code>saveAs()</code> 接口。<a href="https://www.cnblogs.com/jackyWHJ/articles/10435851.html" target="_blank" rel="noopener">中文教程</a></li>
<li><a href="http://sheetjs.com/" target="_blank" rel="noopener">SheetJS js-xlsx</a>：操作表格</li>
</ul>
<pre><code class="bash">$ yarn add lodash
$ yarn add futil-js
$ yarn add moment
$ yarn add moment-timezone
$ yarn add js-cookie
$ yarn add js-md5
$ yarn add jsencrypt
$ yarn add qs
$ yarn add path-to-regexp
$ yarn add jszip
$ yarn add store
$ yarn add file-saver
$ yarn add xlsx</code></pre>
</li>
<li><p><strong>Mock</strong></p>
<ul>
<li><a href="http://mockjs.com/" target="_blank" rel="noopener">Mock.js</a> ：生成随机数据，拦截 Ajax 请求</li>
</ul>
<pre><code>$ yarn add mockjs2</code></pre></li>
<li><p><strong>动画</strong></p>
<ul>
<li><a href="https://github.com/OYsun/VueStar/blob/master/README-ZH.MD" target="_blank" rel="noopener">vue-start</a>: 带动画的点赞效果</li>
<li><a href="https://www.npmjs.com/package/vue-touch-ripple" target="_blank" rel="noopener">vue-touch-ripple</a>: 点击水滴效果</li>
<li><a href="https://github.com/IanLunn/Hover" target="_blank" rel="noopener">hover.css</a>: 鼠标经过的动画</li>
<li><a href="https://daneden.github.io/animate.css/" target="_blank" rel="noopener">animate</a>: 动画</li>
<li><a href="https://www.tweenmax.com.cn/" target="_blank" rel="noopener">tweenmax</a>: 是greensock 动画平台的核心插件,greensock 是一套用于在所有主流浏览器中制作高性能html5动画的工具。</li>
</ul>
</li>
<li><p><strong>其他插件</strong></p>
<ul>
<li><a href="https://necolas.github.io/normalize.css/" target="_blank" rel="noopener">Normalize.css</a>：统一浏览器渲染 </li>
<li><a href="http://ricostacruz.com/nprogress/" target="_blank" rel="noopener">nprogress</a>: 进度条</li>
<li><a href="https://github.com/sindresorhus/screenfull.js" target="_blank" rel="noopener">screenfull</a>：全屏</li>
<li><a href="https://mirari.cc/2017/08/14/全屏切换组件vue-fullscreen/" target="_blank" rel="noopener">vue-fullscreen</a>: 全屏组件</li>
<li><a href="http://www.clipboardjs.cn/" target="_blank" rel="noopener">clipboard</a> : 剪切板</li>
<li><a href="https://github.com/Inndy/vue-clipboard2" target="_blank" rel="noopener">vue-clipboard2</a>：基于clipboard封装剪切板</li>
<li><a href="https://github.com/SortableJS/Sortable" target="_blank" rel="noopener">Sortable</a>： 拖曳排序  <a href="http://www.sortablejs.com/index.html" target="_blank" rel="noopener">中文教程</a></li>
<li><a href="https://github.com/SortableJS/Vue.Draggable" target="_blank" rel="noopener">Vue.Draggable</a> ：基于sortable拖曳排序组件</li>
<li><a href="https://www.vue-treeselect.cn/" target="_blank" rel="noopener">vue-treeselect</a> ：vue树选择组件</li>
<li><a href="https://github.com/senchalabs/connect#readme" target="_blank" rel="noopener">Connect</a>：是一个node中间件（middleware）框架</li>
<li><a href="https://www.npmjs.com/package/enquire-js" target="_blank" rel="noopener">enquire.js</a>：响应css媒体查询</li>
<li><a href="https://www.npmjs.com/package/vue-cropper" target="_blank" rel="noopener">vue-cropper</a>：图片裁剪 </li>
<li><a href="https://www.npmjs.com/package/vue-image-crop-upload" target="_blank" rel="noopener">vue-image-crop-upload</a> ：图片裁剪上传</li>
<li><a href="https://www.npmjs.com/package/vue-svg-component-builder" target="_blank" rel="noopener">vue-svg-component-builder</a>：从SVG图像创建可直接渲染的VueJS组件</li>
</ul>
<pre><code class="bash">$ yarn add normalize.css
$ yarn add nprogress
$ yarn add screenfull
$ yarn add vue-fullscreen
$ yarn add vue-clipboard2 clipboard
$ yarn add vuedraggable sortablejs
$ yarn add @riophae/vue-treeselect
$ yarn add connect
$ yarn add enquire.js
$ yarn add vue-cropper
$ yarn add vue-image-crop-upload
$ yarn add vue-svg-component-builder
$ yarn add
$ yarn add
$ yarn add
$ yarn add</code></pre>
</li>
</ul>

      
       <hr><span style="font-style: italic;color: gray;"> 转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 86415270@qq.com </span>
    </div>
</article>


<p>
    <a class="dashang" onclick="dashangToggle()">赏</a>
</p>


<div class="article_copyright">
    <p><span class="copy-title">文章标题:</span>Vue CLI创建项目</p>
    <p><span class="copy-title">文章字数:</span><span class="post-count">1.8k</span></p>
    <p><span class="copy-title">本文作者:</span><a title="李瑞桐">李瑞桐</a></p>
    <p><span class="copy-title">发布时间:</span>2021-02-02, 21:08:20</p>
    <p><span class="copy-title">最后更新:</span>2022-11-20, 17:11:12</p>
    <span class="copy-title">原始链接:</span><a class="post-url" href="/lrt_blog/2021/02/02/66%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/vue-cli%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE/" title="Vue CLI创建项目">https://loveyangxiaoyu.gitee.io/lrt_blog/2021/02/02/66%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/vue-cli%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE/</a>
    <p>
        <span class="copy-title">版权声明:</span><i class="fa fa-creative-commons"></i> <a rel="license noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" title="CC BY-NC-SA 4.0 International" target = "_blank">"署名-非商用-相同方式共享 4.0"</a> 转载请保留原文链接及作者。
    </p>
</div>



    <div id="comments"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">

<script type="text/javascript">
    $.getScript('/lrt_blog/js/gitalk.js', function () {
        var gitalk = new Gitalk({
            clientID: '977658d53bffc49a7231',
            clientSecret: 'bd5ef398e64a580d122200d984d56f6da067ff83',
            repo: 'lrt890424.github.io',
            owner: 'lrt890424',
            admin: ['lrt890424'],
            id: decodeURI(location.pathname),
            distractionFreeMode: 'true',
            language: 'zh-CN',
            perPage: parseInt('10',10)
        })
        gitalk.render('comments')
    })
</script>




    




    </div>
    <div class="copyright">
        <p class="footer-entry">©2016-2020 Li Ruitong</p>
<p class="footer-entry">Built with <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/yelog/hexo-theme-3-hexo" target="_blank">3-hexo</a> theme</p>

    </div>
    <div class="full-toc">
        <button class="full"><span class="min "></span></button>
<button class="post-toc-menu"><span class="post-toc-menu-icons"></span></button>
<div class="post-toc"><span class="post-toc-title">目录</span>
    <div class="post-toc-content">

    </div>
</div>
<a class="" id="rocket" ></a>
    </div>
</div>
<div class="acParent"></div>

<div class="hide_box" onclick="dashangToggle()"></div>
<div class="shang_box">
    <a class="shang_close" onclick="dashangToggle()">×</a>
    <div class="shang_tit">
        <p>喜欢就点赞,疼爱就打赏</p>
    </div>
    <div class="shang_payimg">
        <div class="pay_img">
            <img src="/lrt_blog/img/alipay.jpg" class="alipay" title="扫码支持">
            <img src="/lrt_blog/img/weixin.jpg" class="weixin" title="扫码支持">
        </div>
    </div>
    <div class="shang_payselect">
        <span><label><input type="radio" name="pay" checked value="alipay">支付宝</label></span><span><label><input type="radio" name="pay" value="weixin">微信</label></span>
    </div>
</div>


</body>
<script src="/lrt_blog/js/jquery.pjax.js?v=1.0.0" ></script>

<script src="/lrt_blog/js/script.js?v=1.0.0" ></script>
<!-- 代码块复制功能 -->
<script type="text/javascript" src="/lrt_blog/js/clipboard.min.js"></script>
<script type="text/javascript" src="/lrt_blog/js/clipboard-use.js"></script>
<!-- mermaid chart -->

<script src='https://unpkg.com/mermaid@7.1.2/dist/mermaid.min.js'></script>
<script>
    if (window.mermaid) {
        mermaid.initialize({theme: 'forest'});
    }
</script>

<script>
    var img_resize = 'default';
    /*作者、标签的自动补全*/
    $(function () {
        $('.search').AutoComplete({
            'data': ['#教程','#centos','#linux','#问题集锦','#防火墙','#软件安装','#ubuntu','#svn','#git','#MongoDB','#jd-gui','#java','#反编译','#MySQL','#Redis','#学习笔记','#navicat','#DM','#windows','#系统优化','#书签','#Nginx','#docker','#vue','#Yarn','#前端开发','#vscode','#eslint','#prettier','#Markdown','#hexo','#开源','#Maven',],
            'itemHeight': 20,
            'width': 418
        }).AutoComplete('show');
    })
    function initArticle() {
        /*渲染对应的表格样式*/
        
            $(".post .pjax table").addClass("green_title");
        

        /*渲染打赏样式*/
        
        $("input[name=pay]").on("click", function () {
            if($("input[name=pay]:checked").val()=="weixin"){
                $(".shang_box .shang_payimg .pay_img").addClass("weixin_img");
            } else {
                $(".shang_box .shang_payimg .pay_img").removeClass("weixin_img");
            }
        })
        

        /*高亮代码块行号*/
        
        $('pre code').each(function(){
            var lines = $(this).text().split('\n').length, widther='';
            if (lines>99) {
                widther = 'widther'
            }
            var $numbering = $('<ul/>').addClass('pre-numbering ' + widther).attr("unselectable","on");
            $(this).addClass('has-numbering ' + widther)
                    .parent()
                    .append($numbering);
            for(var i=1;i<=lines;i++){
                $numbering.append($('<li/>').text(i));
            }
        });
        

        /*访问数量*/
        
        $.getScript("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");
        

        /*代码高亮，行号对齐*/
        $('.pre-numbering').css('line-height',$('.has-numbering').css('line-height'));

        
    }

    /*打赏页面隐藏与展示*/
    
    function dashangToggle() {
        $(".shang_box").fadeToggle();
        $(".hide_box").fadeToggle();
    }
    

</script>

<!--加入行号的高亮代码块样式-->

<style>
    pre{
        position: relative;
        margin-bottom: 24px;
        border-radius: 10px;
        border: 1px solid #e2dede;
        background: #FFF;
        overflow: hidden;
    }
    code.has-numbering{
        margin-left: 30px;
    }
    code.has-numbering.widther{
        margin-left: 35px;
    }
    .pre-numbering{
        margin: 0px;
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        padding: 0.5em 3px 0.7em 5px;
        border-right: 1px solid #C3CCD0;
        text-align: right;
        color: #AAA;
        background-color: #fafafa;
    }
    .pre-numbering.widther {
        width: 35px;
    }
</style>

<!--自定义样式设置-->
<style>
    
    
    .nav {
        width: 542px;
    }
    .nav.fullscreen {
        margin-left: -542px;
    }
    .nav-left {
        width: 120px;
    }
    
    
    @media screen and (max-width: 1468px) {
        .nav {
            width: 492px;
        }
        .nav.fullscreen {
            margin-left: -492px;
        }
        .nav-left {
            width: 100px;
        }
    }
    
    
    @media screen and (max-width: 1024px) {
        .nav {
            width: 492px;
            margin-left: -492px
        }
        .nav.fullscreen {
            margin-left: 0;
        }
        .nav .hide-list.fullscreen {
            left: 492px
        }
    }
    
    @media screen and (max-width: 426px) {
        .nav {
            width: 100%;
        }
        .nav-left {
            width: 100%;
        }
    }
    
    
    .nav-right .title-list nav a .post-title, .nav-right .title-list #local-search-result a .post-title {
        color: #383636;
    }
    
    
    .nav-right .title-list nav a .post-date, .nav-right .title-list #local-search-result a .post-date {
        color: #5e5e5f;
    }
    
    
    .nav-right nav a.hover, #local-search-result a.hover{
        background-color: #e2e0e0;
    }
    
    

    /*列表样式*/
    
    .post .pjax article .article-entry>ol, .post .pjax article .article-entry>ul, .post .pjax article>ol, .post .pjax article>ul{
        border: #e2dede solid 1px;
        border-radius: 10px;
        padding: 10px 32px 10px 56px;
    }
    .post .pjax article .article-entry li>ol, .post .pjax article .article-entry li>ul,.post .pjax article li>ol, .post .pjax article li>ul{
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .post .pjax article .article-entry>ol>li, .post .pjax article .article-entry>ul>li,.post .pjax article>ol>li, .post .pjax article>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    .post .pjax article .article-entry li>ol>li, .post .pjax article .article-entry li>ul>li,.post .pjax article li>ol>li, .post .pjax article li>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    

    /* 背景图样式 */
    
    


    /*引用块样式*/
    

    /*文章列表背景图*/
    

    
</style>







</html>
